<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
                * {
            box-sizing: border-box;
        }
        
        .container {
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
        }
        
        .row {
            margin-left: -15px;
            margin-right: -15px;
        }
        
        .col {
            padding-left: 15px;
            padding-right: 15px;
            height: 100px;
            background-color: #ccc;
            background-clip: content-box;
            padding-top: 10px;
            padding-bottom: 10px;
            float: left;
        }
        
        .col-xs-1 {
            width: 25%;
        }
        
        .col-xs-2 {
            width: 50%;
        }
        
        .col-xs-3 {
            width: 75%;
        }
        
        .col-xs-4 {
            width: 100%;
        }
        
        @media(min-width:480px) {
            .col-sm-1 {
                width: 25%;
            }
            .col-sm-2 {
                width: 50%;
            }
            .col-sm-3 {
                width: 75%;
            }
            .col-sm-4 {
                width: 100%;
            }
            @media(min-width:960px) {
                .col-md-1 {
                    width: 25%;
                }
                .col-md-2 {
                    width: 50%;
                }
                .col-md-3 {
                    width: 75%;
                }
                .col-md-4 {
                    width: 100%;
                }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col col-xs-4 col-sm-2 col-md-1">

            </div>
            <div class="col col-xs-4 col-sm-2 col-md-1">

            </div>
            <div class="col col-xs-4 col-sm-2 col-md-1">

            </div>
            <div class="col col-xs-4 col-sm-2 col-md-1">

            </div>
        </div>
    </div>
</body>

</html>